<template>
    <div >
      <a-row :gutter="10" type="flex" >
        <a-col flex="5">
            <a-form ref="formRef" :model="form" :label-col="{ span: 6 }">
      <a-form-item label="事件名称" name="name">
        <a-input v-model:value="form.event_name" placeholder="请输入事件名称" defaultValue="B737NG_7_右发引气压力高"  />
      </a-form-item>

      <a-form-item label="参数输入" name="event_param">
        <a-select v-model:value="form.event_param" mode="tags" style="width: 100%" placeholder="选择参数" :options="paramOptions" @change="handleChange"
  ></a-select>
      </a-form-item>
      
      <a-form-item >
        <a-list size="small" item-layout="horizontal" bordered name="event_param_list" :data-source="paramList">
          <template #renderItem="{ item }">
            <a-list-item>
              {{item.paramDesc}}
            </a-list-item>
          </template>
          <template #header>
        <div>已选参数</div>
      </template>
    </a-list>
      </a-form-item>
      <a-form-item label="预警等级" name="event_rank">
        <a-checkbox-group v-model:value="form.event_rank" :options="plainOptions" @change="rankChange" />
      </a-form-item>
      <a-form-item label="时间窗口" name="event_time_window">
        <a-input-group compact>
        <a-input v-model:value="form.event_time_window" placeholder="设置时间窗口" style="width: calc(100% - 100px)" disabled="true"/> 
        <a-button type="primary" @click="win_btn_click"	style="width: 90px;"	>设置</a-button>
      </a-input-group>
      <a-modal :visible="openWin" width="600px" title="设置窗口时间" @ok="openWinOk" @cancel="openWinClose" cancelText="清除时间窗口">
        <p>在航班结束前<a-input-number id="win_start" v-model:value="winStart" :min="1" :max="100" />
          秒到<a-input-number id="win_end" v-model:value="winEnd" :min="1" :max="100" />秒的时间范围</p>
      </a-modal>
      </a-form-item>
      <a-form-item label="前置条件" name="event_condition">
        <a-textarea v-model:value="form.event_condition" placeholder="请输入前置条件" rows="3" />
      </a-form-item>
      <a-form-item label="判断逻辑" name="event_judement">
        <a-input-group compact>
        <a-input v-model:value="form.event_judement" placeholder="请输入判断逻辑" style="width: calc(100% - 100px)" disabled="true" />
        <a-button type="primary" @click="jude_btn_click" style="width: 90px;"	>设置</a-button>
      </a-input-group>
      <a-modal :visible="openJude" width="800px" title="设置判断逻辑" @ok="openJudeOk" @cancel="openJudeClose" cancelText="清除判断逻辑">
        <p><a-radio-group v-model:value="judeChange" @change="judeChangeChk"><a-radio :value="1">配置区间</a-radio><a-radio :value="2">配置频次</a-radio></a-radio-group></p>
        <p v-if="rangeShow"><a-select v-model:value="judeParam" placeholder="选择参数" :options="judeParamOptions"></a-select>
          如果超过连续<a-input-number id="seriesCnt" v-model:value="seriesCnt" :min="1" :max="100" />  
          秒的值都<a-select v-model:value="judeParamSign" placeholder="选择参数" :options="judeParamSignOptions"></a-select>
          <a-input-number id="win_end" v-model:value="judeParamValue" :min="1" :max="100" />,则触发
          <a-select v-model:value="judeParamRank" placeholder="选择参数" :options="judeParamRankOptions"></a-select>事件
        </p>
        <p v-if="frequencyShow">每次触发都记录该预警类型触发了第几次以及持续秒数</p>
      </a-modal>
      </a-form-item>
      <a-form-item >
        <a-list size="small" bordered item-layout="horizontal" name="event_judement_list" :data-source="judeList">
          <template #renderItem="{ item }">
            <a-list-item>
              {{item.jude_value}}
            </a-list-item>
          </template>
          <template #header>
        <div>判断逻辑</div>
      </template>
    </a-list>
      </a-form-item>
      <a-form-item label="返回结果" name="event_return">
        <a-textarea v-model:value="form.event_return" placeholder="请输入备注信息" :rows="2" disabled="true" defaultValue="每一次触发预警都记录下该航班预警类型触发了第几次，并且记下持续秒数" />
      </a-form-item>
    </a-form>
        </a-col>
        <a-col flex="5">
            <a-textarea v-model:value="form.result" placeholder="请在左边设置参数后点击生成代码按钮生成" :rows="40" />
        </a-col>
      </a-row>
    </div>  
    <div style="margin-top: 10px;"> <a-row><a-button type="primary" @click="generate_btn_click" style="width: 100px;margin-left: 45%;"	>生成代码</a-button></a-row></div>
  </template>

<script setup lang="ts">
  import {reactive, ref } from 'vue';

  

  const formDefault = {
    event_name: undefined,
    event_param: undefined,
    event_rank: undefined,
    event_time_window: undefined,
    event_condition: undefined,
    event_judement: undefined,
    event_return: undefined,
    result: undefined,
  };
  let form = reactive({ ...formDefault });
  const paramList=ref([]);
  const judeList=ref([]);

  const openWin=ref(false);
  const winStart=ref();
  const winEnd=ref();

  const judeChange=ref(1);
  const rangeShow=ref(true)
  const frequencyShow=ref(false)

  const openJude=ref(false);
  const judeParam=ref();
  const seriesCnt=ref();
  const judeParamOptions=ref([]);
  const judeParamSign=ref();
  const judeParamValue=ref();
  const judeParamRank=ref();
  const judeParamRankOptions=ref([]);

  let paramRetValue=[];
  let rankRetValue=[];
  let judeRetValue=[];

  const handleChange = (value: string) => {
    paramList.value=[];
    judeParamOptions.value=[];
    paramRetValue=[];
    if(Array.isArray(value)){
      value.forEach((key)=>{
        paramList.value.push({paramDesc:map.get(key)});
        judeParamOptions.value.push({value:key,label:key})
        paramRetValue.push(key);
      });
    }
};

const rankChange=(value:string)=>{
  judeParamRankOptions.value=[];
  rankRetValue=[];
  if(Array.isArray(value)){
      value.forEach((key)=>{
        judeParamRankOptions.value.push({value:key,label:key})
        rankRetValue.push(key)
      });
    }
};

const judeChangeChk=(e:Event)=>{
  let chkValue=e.target.value;
  if(chkValue===1){
    rangeShow.value=true;
    frequencyShow.value=false;
  }else{
    rangeShow.value=false;
    frequencyShow.value=true;
  }
}


const win_btn_click=()=>{
  openWin.value=true;
};

function openWinOk(){
  form.event_time_window = `在航班结束前${winStart.value}秒到${winEnd.value}秒的时间范围`;
  openWin.value=false;
}

function openWinClose(){
  form.event_time_window='';
  openWin.value=false;
}

function openJudeOk(){
  if(judeChange.value===1){
  var judeValue=`${judeParam.value}如果超过连续${seriesCnt.value}秒的值都${judeParamSign.value}${judeParamValue.value}，则触发${judeParamRank.value}事件`;
  var conditionValue=[];

  conditionValue.push(judeParam.value);
  conditionValue.push(seriesCnt.value);
  conditionValue.push(judeParamSign.value);
  conditionValue.push(judeParamValue.value);
  conditionValue.push(judeParamRank.value);
  
  form.event_judement=judeValue;
  judeList.value.push({jude_value:judeValue});
  judeRetValue.push({'template':"{}如果超过连续{}秒的值都{}{},则触发{}","condition_value":conditionValue})
}else
  {
    form.event_judement="每一次触发预警都记下该航班预警触发了第几次以及相应持续秒数";
    judeList.value.push({jude_value:'每一次触发预警都记下该航班预警触发了第几次以及相应持续秒数'});
    judeRetValue.push({'template':"每一次触发预警都记下该航班预警触发了第几次以及相应持续秒数","condition_value":[]})
  }
  openJude.value=false;
}

function openJudeClose(){
  form.event_judement='';
  judeList.value=[];
  openJude.value=false;
}

function jude_btn_click(){
  openJude.value=true;
}

function generate_btn_click(){
  let retValue={"text": {"event_name": "","event_param": {"param":[],"frequency":[]},"event_rank": [],"event_condition": [],"event_time_window": {"template":"","param":[]},
"event_judgment": [{'template':"","condition_value":[]}],"event_return": {"template":"", "return_param":[]}}}

      let winParam=[];
      winParam.push(winStart.value);
      winParam.push(winEnd.value);

      let frequencyValue=[];
      paramRetValue.forEach((key)=>{
        frequencyValue.push(mapfrequency.get(key));
      });

      retValue.text.event_name=form.event_name;
      retValue.text.event_param.param=paramRetValue;
      retValue.text.event_param.frequency=frequencyValue;
      retValue.text.event_rank=rankRetValue;
      
      if(winStart.value==='' || winStart.value===undefined){
        retValue.text.event_time_window={};
      }else{
        retValue.text.event_time_window={"template":"在航班结束前的{}秒到{}秒的时间范围","param":winParam};
      }
      if(form.event_condition=='' || form.event_condition===undefined){
        retValue.text.event_condition=[];
      }
      else retValue.text.event_condition=[form.event_condition];
      
      retValue.text.event_judgment=judeRetValue;
      retValue.text.event_condition=form.event_condition;
      retValue.text.event_return={"template":'每一次触发预警都记录下该航班预警类型触发了第几次，并且记下持续秒数', "return_param":[]}

      form.result=JSON.stringify(retValue);

    }


const plainOptions=['CL0','CL1','CL2','CL3'];
  const paramOptions=[
    {
      value:'DP2',
      label:'DP2'
    }];

    const judeParamSignOptions=[{
      value:'大于',
      label:'大于'
    },{
      value:'大于等于',
      label:'大于等于'
    },{
      value:'小于',
      label:'小于'
    },{
      value:'小于等于',
      label:'小于等于'
    }];

    const map: Map<string, string> = new Map([
  ['DP2', '参数名称：DP2，频率：1HZ'],
]);

const mapfrequency: Map<string, string> = new Map([
  ['DP2', '1HZ'],
  ['TOTAL_AIR_TEMP_L', '1HZ']
]);
</script>


<style scoped lang="less">
  .height100 {
    height: 90%;
  }
</style>